<template>
  <div id="app">
    <div class="main">
      <!--导航栏-->
      <div class="header">
        <Header></Header>
      </div>
      <div class="nav">
        <Nav></Nav>
      </div>
      <div class="content" style="width: 100%;height: 500px;background-color: #F6F6F6">
        <div class="main_con" style="padding-top: 100px">
            <div class="form_content" style="width: 500px;height: 250px;background-color: white;margin: auto; ">
              <!--标题-->
              <div class="title" style="margin-left: 180px;margin-bottom: 20px;padding-top: 20px;">
                <span style="font-size: 20px;font-weight: bold;color: orange">后&nbsp;台&nbsp;登&nbsp;录</span>
              </div>
              <el-form :model="User" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号：" prop="username">
                  <el-input style="width: 300px" type="text" v-model="User.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                  <el-input style="width: 300px;" type="password" v-model="User.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button style="width: 110px" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                  <el-button style="width: 110px" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
        </div>
      </div>
      <!--底部-->
      <div class="footer">
        <Footer></Footer>
      </div>
    </div>
  </div>
</template>
<script>
  import Header from "../../components/Header";
  import Footer from "../../components/Footer";
  import Nav from "../../components/Nav";
  export default {
    name: "Index",
    data(){
      return{
        User:{},
        rules:{
          username:[
            { required: true, message: '请输入账号名称', trigger: 'blur' },
            { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ]
        }
      }
    },
    methods:{

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if(!this.User.username){alert('请输入账号');return false}
            if(!this.User.password){alert('请输入密码');return false}
            let _this = this
            this.$axios.post("http://localhost:8066/user/login",this.User).then(function (res) {
              //清空本次保存数据
              if(res.data!=-1){
                alert("登录成功！")
                localStorage.setItem("login",_this.User.username)
                _this.User = {};
                console.log(res)
                _this.$router.push({name:'Admin',params:{id:res.data}})
              }else {
                alert("账号或密码错误！");
                _this.User = {};
              }
            }).catch(function (err) {
              alert("登陆失败！");
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.User.username = ''
        this.User.password = '';
      }

    },
    components:{
      Footer,
      Header,
      Nav
    }
  }
</script>

<style scoped>

</style>
